const form = document.getElementById("form")
const input = document.getElementById("input")
const todos = document.getElementById("todos")

const todoList = JSON.parse(localStorage.getItem('todoList'))

if(todoList){
    todoList.forEach(todo => addTodo(todo))
}

form.addEventListener('submit', (e)=> {
    e.preventDefault()
    addTodo()
})

function addTodo(todoLS){
    const todo = document.createElement('li')
    todo.innerText = todoLS ? todoLS.text : input.value.trim()
    if(todoLS && todoLS.completed){
        todo.classList.add('completed')
    }

    todo.addEventListener('click', ()=>{
        todo.classList.toggle('completed')
        updateLS()
    })
    todo.addEventListener('contextmenu', (e)=>{
        e.preventDefault()
        todo.remove()
        updateLS()
    })

    todos.appendChild(todo)
    input.value = ''

    updateLS()
}
function updateLS(){
    const todos = document.querySelectorAll('li')
    let todoList = []
    todos.forEach(todo =>{
        todoList.push({
            text: todo.innerText,
            completed: todo.classList.contains('completed')
        })
    })
    localStorage.setItem('todoList', JSON.stringify(todoList))
}
